.addItem {
    position: relative;
    display: flex;
    width: 50%;
    border-radius: 3%;
    justify-content: center;
    box-shadow: 0 0 10px 10px #ddd;

    &:hover {
        box-shadow: 0 0 5px 5px #ddd;
    }

    input {
        font-size: 2rem;
        flex-grow: 1;
        padding: 10px;
        border-radius: 5%;
        outline: none;
        background: none;
        border: none;

    }



    input::placeholder {
        text-align: center;
        font-size: 2rem;
        color: transparent;
        background: linear-gradient(90deg, rgba(243, 72, 104, 1) 20.232394366197184%, rgba(242, 71, 104, 1) 20.232394366197184%, rgba(158, 0, 236, 1) 80.23239436619718%);
        backdrop-filter: opacity(20%);
        -webkit-backdrop-filter: opacity(20%);
        background-size: 200% 100%;
        background-position: 0% 0%;
        background-clip: text;
        -webkit-background-clip: text;
        animation: move 1.5s linear infinite;

        &:hover {
            color: black;
        }
    }

    div {
        position: absolute;
        right: 0;
        display: flex;
        height: 4rem;
        width: 4rem;
        justify-content: center;
        align-items: center;
        margin-right: 0.2rem;

        button {
            padding: 0.5rem 1rem;
            border: none;
            box-shadow: 0 0 3px 3px #aaa;
            border-radius: 5%;
            transition: all 1s;

            &:hover {
                background-color: deepskyblue;
                box-shadow: 0 0 5px 5px rgb(24, 155, 195)
            }

            &:active {
                background-color: green;
            }


        }
    }
}

@keyframes move {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 0%;
    }

    100% {
        background-position: 0% 0%;
    }
}